<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <!-- 第一行 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>📊 商品分类成交占比</span>
            </div>
          </template>
          <div ref="pieChart" style="height: 400px;"></div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>📈 销量前10商品（本周）</span>
            </div>
          </template>
          <div ref="salesChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <!-- 第二行 -->
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>⚠️ 库存预警TOP10</span>
            </div>
          </template>
          <div ref="inventoryChart" style="height: 400px;"></div>
        </el-card>
      </el-col>

      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>🕒 最近7天访问流量</span>
            </div>
          </template>
          <div ref="trafficChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const pieChart = ref(null)
const salesChart = ref(null)
const inventoryChart = ref(null)
const trafficChart = ref(null)

// 生成最近7天日期
const generateDates = () => {
  const dates = []
  for (let i = 6; i >= 0; i--) {
    const date = new Date()
    date.setDate(date.getDate() - i)
    dates.push(`${date.getMonth()+1}/${date.getDate()}`)
  }
  return dates
}

onMounted(() => {
  // 商品分类饼图
  const pieOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center'
    },
    series: [{
      name: '成交占比',
      type: 'pie',
      radius: ['40%', '65%'],
      data: [
        { value: 28.5, name: '新鲜水果', itemStyle: { color: '#36a3eb' } },
        { value: 22.3, name: '进口肉类', itemStyle: { color: '#ff6b6b' } },
        { value: 18.7, name: '精选海鲜', itemStyle: { color: '#34bfa3' } },
        { value: 15.2, name: '热销饮品', itemStyle: { color: '#f4516c' } },
        { value: 9.8, name: '优选酒类', itemStyle: { color: '#ffc107' } },
        { value: 5.5, name: '经典调味', itemStyle: { color: '#8e44ad' } }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
  }
  echarts.init(pieChart.value).setOption(pieOption)

  // 销量图表
  const salesOption = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: ['纯牛奶', '草莓', '火腿', '香蕉', '蓝莓', '橙子', '葡萄', '菠萝', '芒果', '西瓜']
    },
    yAxis: { type: 'value' },
    series: [{
      data: [1100, 1000, 900, 800, 750, 700, 650, 600, 550, 500],
      type: 'bar',
      itemStyle: { color: '#36a3eb' }
    }]
  }
  echarts.init(salesChart.value).setOption(salesOption)

  // 库存图表
  const inventoryOption = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'value',
      inverse: true
    },
    yAxis: {
      type: 'category',
      data: ['冷冻草莓', '鸡蛋', '鲜牛奶', '全麦面包', '牛肉', '三文鱼', '葡萄', '酸奶', '菠菜', '鸡胸肉']
    },
    series: [{
      data: [23, 45, 56, 78, 89, 95, 112, 120, 135, 150],
      type: 'bar',
      itemStyle: { color: '#ff6b6b' }
    }]
  }
  echarts.init(inventoryChart.value).setOption(inventoryOption)

  // 流量图表
  const trafficOption = {
    tooltip: { trigger: 'axis' },
    xAxis: {
      type: 'category',
      data: generateDates()
    },
    yAxis: { type: 'value' },
    series: [{
      data: [2345, 2456, 2567, 2234, 2789, 3123, 2987],
      type: 'line',
      smooth: true,
      itemStyle: { color: '#34bfa3' }
    }]
  }
  echarts.init(trafficChart.value).setOption(trafficOption)
})
</script>

<style scoped>
.el-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  transition: all 0.3s;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.el-card__header {
  font-weight: 600;
  background: #f8f9fa;
  border-bottom: 1px solid #ebeef5;
  padding: 18px 20px;
}

.clearfix span {
  font-size: 16px;
  color: #2c3e50;
}
</style>